Ext.define('TutorialApp.view.login.Login',{

    extend:'Ext.window.Window',
    xtype:'login',

    //Login窗口会包含一个表单(Ext.form.Panel)
    //LoginController里定义了Login窗口会使用到的方法onLoginClick
    //requires可以确保这2个类会在Login初始化完成之前先被初始化
    requires: [
        'TutorialApp.view.login.LoginController',
        'Ext.form.Panel'
    ],
    //绑定controller，绑定时使用的是别名
    controller: 'login',
    //padding: 10px
    bodyPadding: 10,
    //窗口的标题栏文字
    title: 'Login Window',
    //隐藏窗口右上角的关闭按钮"x"
    closable: false,
    //Window的autoShow默认为false
    //Window可以用show()和hide()来手动显示和隐藏
    //把autoShow设为true, 则在Window创建之后会自动显示
    autoShow: true,
    //把窗口里的UI组件放在items里
    items: {
        //表单
        xtype: 'form',
        reference: 'form',
        //把表单里的UI组件放在表单的items里
        items: [{
            //供用户输入用户名的文本框
            xtype: 'textfield',
            name: 'username',
            //fieldLabel是显示在文本框前的标签文字
            fieldLabel: 'Username',
            //打开非空校验，即要求输入的用户名不能为空
            allowBlank: false
        }, {
            //供用户输入密码的文本框
            xtype: 'textfield',
            name: 'password',
            //inputType设为password，则用户输入的内容会以*回显在屏幕上
            inputType: 'password',
            fieldLabel: 'Password',
            allowBlank: false
        }, {
            //显示在密码输入框下方的文字
            xtype: 'displayfield',
            hideEmptyLabel: false,
            value: 'Enter any non-blank password'
        }],
        //表单的按钮
        buttons: [{
            //按钮上的显示文字
            text: 'Login',
            //设为true，则Login按钮在表单通过校验前是不能被点击的
            formBind: true,
            listeners: {
                //当按钮被点击时
                click: 'onLoginClick'
            }
        }]
    }
});